<template>
  <div class="home">
    <grid-content>
      <template #left>
        <a-card  class="card" size="small" title="公告" style="width: 100%">
          <template #extra><a @click="() => {router.push('/notice')}" href="#">more</a></template>
          <a-table
              :showHeader="false"
              :pagination="false"
              :loading="announcementLoading"
              :columns="announcementsColumns"
              :data-source="announcements">

            <template #bodyCell="{ column, text ,record}">
              <template v-if="column.dataIndex === 'title'">
                <a-tooltip placement="top">
                  <template #title>
                    {{text}}
                  </template>
                  <a @click="gotoAnnouncement(record)">{{ text }}</a>
                </a-tooltip>
              </template>
            </template>
          </a-table>
        </a-card>
        <a-card class="card"   size="small" title="近期比赛" style="width: 100%">
          <template #extra><a @click="() => {router.push('/contestList')}" href="#">more</a></template>
          <a-table
              :showHeader="false"
              :pagination="false"
              :loading="recentlyLoading"
              :columns="recentlyContestsColumns"
              :data-source="recentlyContests">
            <template #bodyCell="{ column, text ,record}">
              <template v-if="column.dataIndex === 'name'">
                <a>{{ text }}</a>
              </template>
              <template v-else-if="column.dataIndex === 'title'">
                <a-tooltip placement="top">
                  <template #title>
                    {{text}}
                  </template>
                  <a @click="() => {router.push(`/contest/${record.id}`)}">{{ text }}</a>
                </a-tooltip>
              </template>
              <template v-else-if="column.dataIndex === 'startTime'">
                <span>{{calculateMatchDuration(null,text)}}</span>
              </template>
              <div v-else-if="column.dataIndex == 'type'">
                <a-tag color="cyan">{{getLabelByValue(COMPETITION_TYPE ,text)}}</a-tag>
              </div>
            </template>
          </a-table>
        </a-card>
        <a-card :loading="newProblemsLoading" class="card" size="small" title="最近更新" style="width: 100%">
          <template #extra><a @click="() => {router.push('/problemList')}" href="#">more</a></template>
          <problem-list v-if="!newProblemsLoading"
                        :data="newProblems" />
        </a-card>

      </template>
      <template #right>
        <a-card  class="card" size="small" title="排行榜" style="width: 100%;position: sticky;top: 80px">
          <template #extra><a @click="() => {router.push('/rankings')}" href="#">more</a></template>
          <a-table
              size="small"
              :pagination="false"
              :loading="ranksLoading"
              :columns="ranksColumns"
              :data-source="ranks">
            <template  #bodyCell="{ index,column, text ,record}">
              <template v-if="column.dataIndex === 'nickName'">
                <a>{{ record.userVO?.nickName }}</a>
              </template>
              <template v-else-if="column.dataIndex === 'avatar'">
                <a-avatar :src="record.userVO?.avatar" />
              </template>
              <template v-else-if="column.dataIndex === 'index'">
                <span>{{ index + 1 }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'percent'">
                <span>{{ (((record.acTotal / record.total))*100).toFixed(2) }}%</span>
              </template>
              <template v-else>
                <span>{{ text }}</span>
              </template>
            </template>
          </a-table>
        </a-card>

      </template>
    </grid-content>
    <rights-footer/>

  </div>
</template>

<script lang="ts" setup>
import GridContent from "@/components/GridContent"
import ProblemList from "@/components/ProblemList"
import {calculateMatchDuration,getDateStatus} from "@/utils/date";
import {COMPETITION_TYPE,getLabelByValue} from "@/common/enum"
import {getRanks} from "@/api/judge";
import {getNewProblemList} from "@/api/problem";
import {getRecentlyContest} from "@/api/contest";
import {getAnnouncementList} from "@/api/home";
import {isExternal} from "@/utils/validate"
import router from "@/router";
import RightsFooter from "@/components/RightsFooter/index.vue";
onMounted( () => {
  initAnnouncements();
  initRanks();
  initNewProblems();
  initRecentlyContests();
})

//排行榜
const ranksLoading = ref<boolean>(false)
let ranks = []
const ranksColumns = [
  {
    title: '名次',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
  },
  // {
  //   title: '昵称',
  //   dataIndex: 'nickName',
  //   key: 'nickName',
  // },
  {
    title: 'AC',
    dataIndex: 'acTotal',
    key: 'acTotal',
  },
  {
    title: '总提交',
    dataIndex: 'total',
    key: 'total',
  },

];
const initRanks = async () => {
  ranksLoading.value = true;
  const res = (await getRanks({})).data
  ranks = res.rows;
  ranksLoading.value = false;

}
//最近题目
const newProblemsLoading = ref<boolean>(false)
let newProblems = []
const initNewProblems = async () => {
  newProblemsLoading.value = true;
  newProblems = (await getNewProblemList()).data
  newProblemsLoading.value = false;
}
//最近比赛
const recentlyLoading = ref<boolean>(false)
const recentlyContestsColumns = [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis:true,

  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    ellipsis: true,
    align:"right",
    width:100

  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    key: 'startTime',
    ellipsis:true,
    width:150

  },
]
let recentlyContests = [];
const initRecentlyContests = async () => {
  recentlyLoading.value = true;
  recentlyContests = (await getRecentlyContest( {pageSize: 5, pageNum: 1})).data.rows
  recentlyLoading.value = false;
}


//公告
const gotoAnnouncement = (record) => {
 // console.log(record)
  if(record.url != ""){
    if(isExternal(record.url)){
      window.open(record.url, "_blank");
      return ;
    }
    router.push(record.url)
  }else {
    router.push('/noticeDetails/' + record.id)
  }
}
const announcementLoading = ref<boolean>(false)
let announcements = []
const announcementsColumns =  [
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
    ellipsis:true,

  },
  {
    title: '发布时间',
    dataIndex: 'createTime',
    key: 'createTime',
    ellipsis:true,
    width:200
  },
]
const initAnnouncements = async () => {
  announcementLoading.value = true;
  const res = (await getAnnouncementList()).data
  announcements = res.rows;
  announcementLoading.value = false;

}


</script>

<style lang="scss" scoped>
.home{
  .card{
    margin-bottom: 30px;
  }
}
</style>
